<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ticker</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js" type="text/javascript"></script>
<style type="text/css">
<!--
/*body {
	background-color: #000;
	font-family: Arvo, serif;
	color: #fff;
	font-size: xx-large;
}

#container {
/*	width:100%;
	height:100%;*/
	text-align: center;
	vertical-align: middle;
	margin: 20% 15% 20% 15%;
}

#tickerline {
	vertical-align: middle;
}*/
//-->
</style>
<script type="text/javascript">
<!--

function Ticker( container ) {

	var container = container;
	this.news = new Array();
	var actPosition = 0;
	
	//container.hide();
	
	this.loadData = function() {
	
		//get the JSON data from the Twitter search API
		$.getJSON("http://search.twitter.com/search.json?q=-RT%20%23newstweet%20%40Der_Postillon&amp;src=hash&amp;rpp=100&amp;callback=?", function(data)
		{
			//loop the tweets
			$(data.results).each(function(i,v)
			{
				if(this.text.match(/\+\+\+.*?\+\+\+/)) {
					ticker.news.push(this.text.match(/\+\+\+.*?\+\+\+/));
				}
			});
			ticker.next();
			window.setInterval("ticker.next()",10000);
		});
	}

	this.next = function() {
		// check that there are news to display
		if(this.news.length == 0) return;
		// if the last news has been reached, change
		if(actPosition >= this.news.length) actPosition = 0;
		
		this.displayNews(actPosition);
		actPosition++;
	}
	
	this.displayNews = function(pos) {
		$(container).fadeOut(2000, function() {
			$(this).html(ticker.news[pos]);
			$(this).fadeIn(2000, function() {});
		});
	}
}


var ticker = new Ticker("#tickerline");

$(document).bind('pageinit', function() {
	
	ticker.loadData();

	$('container').live('swipeleft',function(event){
		alert('This page was swiped left');
		return false;
	});
	$('container').live('swiperight',function(event){
		alert('This page was swiped right');
		return false;
	});
	
	
	$('container').live('tap',function(event){
		alert('This page was taped');
		return false;
	});
	
	
	$('container').bind('tap',function(event){
		alert('This page was taped with bind');
		return false;
	});
	
	
	$('container').bind('pagecreate',function(event){
		alert('page created');
		return false;
	});
	
});



//-->
</script>

</head>
<body>

<div data-role="page" id="container" data-theme="a">
	<div data-role="content">	
		<span id="tickerline" />
	</div>
</div>


</body>
</html>